<template>
<div>
    <div style="display: flex;justify-content:center">
        <span>项目后端地址：</span>
        <el-link href="https://gitee.com/yuan_xikai/hj-boot" target="_blank" type="primary">hj-boot</el-link>
    </div>
    <div style="display: flex;justify-content:center">
        <span>项目前端地址：</span>
        <el-link href="https://gitee.com/yuan_xikai/hj_boot_element" target="_blank" type="primary">hj_boot_element</el-link>
    </div>

    <el-divider content-position="left">往期课程</el-divider>
    <div style="display: flex;flex-direction:row;justify-content:space-between">
        <div style="width:470px">

            <el-table :data="tableData" style="width: 100%" height="600">

                <el-table-column label="课程内容" align="center">
                    <template slot-scope="scope">
                        <el-link type="primary" :href="scope.row.link" target="_blank">

                            <span>
                                {{ scope.row.content }}
                            </span>

                        </el-link>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div style="width:100%;height:600px;margin-left:10px;margin-top:20px;display:flex;justify-content:center;align-items:center">
            <el-image style="width: 65%; height: 80%" :src="loaclimg" fit="scale-down"></el-image>
        </div>
    </div>
</div>
</template>

<script>
export default {
    name: "home",
    mounted() {
        this.handleResize();
        window.addEventListener('resize', this.handleResize);
    },
    methods: {
        handleResize() {
            if (document.body.clientWidth < 768) {
                this.smallPaginition = true

            } else {
                this.smallPaginition = false
            }
        },
    },
    data() {
        return {
            loaclimg: require("@/assets/tech.png"),
            smallPaginition: false,
            tableData: [{
                    content: "MySql 2",
                    link: "https://pan.baidu.com/s/1tSV2L9DchiNrqz3UkQhdzw?pwd=pvr0",
                },
                {
                    content: "MySql 3",
                    link: "https://pan.baidu.com/s/1ZgjkSk7VfYMpCrBm6vA0Sg?pwd=uj83",
                },
                {
                    content: "MySql 4",
                    link: "https://pan.baidu.com/s/193ZYN12HtpWGqRYEQG_6EQ?pwd=5bl0",
                },
                {
                    content: "Java基础 1",
                    link: "https://pan.baidu.com/s/1ev7Futg5NV5Q4vQ4EIk-Lw?pwd=7jd5",
                },
                {
                    content: "Java基础 2",
                    link: "https://pan.baidu.com/s/187RqQboXMVoG9DgjWnDB3A?pwd=7vjn",
                },
                {
                    content: "Java面向对象 1",
                    link: "https://pan.baidu.com/s/1BcGBLL_zkrp2PGgMgVyBFg?pwd=q2i4",
                },
                {
                    content: "Java面向对象 2",
                    link: "https://pan.baidu.com/s/1A7FWPCplgbE1RIQqZRuhLA?pwd=t153",
                },
                {
                    content: "Java面向对象 3",
                    link: "https://pan.baidu.com/s/1Qpi6EXWDuG1EaFu9ShPwEA?pwd=v0p3",
                },
                {
                    content: "Java常用类 1",
                    link: "https://pan.baidu.com/s/1EUcwVSLd61Adv2beIijo_A?pwd=04iw",
                },
                {
                    content: "Java常用类 2",
                    link: "https://pan.baidu.com/s/1zkJrWT441hge1DEGnzptAw?pwd=68k7",
                },
                {
                    content: "Java集合",
                    link: "https://pan.baidu.com/s/19NXq-Z_UTL4VhvSnv6Eu-A?pwd=4yf9",
                },
                {
                    content: "Java异常及Maven",
                    link: "https://pan.baidu.com/s/1T-zgeKHO2SmTTKKOvP7lPw?pwd=ulms",
                },
                {
                    content: "Spring Boot",
                    link: "https://pan.baidu.com/s/1VarB_vL536Y42sWdaPq-6Q?pwd=w5we",
                },
                {
                    content: "Mybatis Plus 1",
                    link: "https://pan.baidu.com/s/1TpvoBUu6liOSs2s2DyFjHg?pwd=r6rk",
                },
                {
                    content: "Mybatis Plus 2",
                    link: "https://pan.baidu.com/s/1PD1eu7ol1EE82gwXaLe-xA?pwd=idza",
                },
            ]
        }
    }

};
</script>

<style>
</style>
